<template>
  <div class="box">
    <el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="handleClick">
      <el-tab-pane label="总览" name="one">
        <zl />
      </el-tab-pane>
      <el-tab-pane label="派费" name="two">
        <pf />
      </el-tab-pane>
      <el-tab-pane label="寄件费" name="three">
        <jjf />
      </el-tab-pane>
      <el-tab-pane label="考核款" name="four">
        <khk />
      </el-tab-pane>
      <el-tab-pane label="包仓费" name="five">
        <bcf />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import pf from './components/pf.vue'
import jjf from './components/jjf.vue'
import khk from './components/khk.vue'
import bcf from './components/bcf.vue'
import zl from './components/zl.vue'

export default {

  components: {
    jjf,
    khk,
    bcf,
    pf,
    zl
  },

  data() {
    return {
      activeName: 'one',
      tabPosition: 'left'

    }
  },

  methods: {
    // 整体的一个tabs的切换事件
    handleClick(tab, event) {
      // console.log(tab, event)
    }

  }

}
</script>

<style lang="scss" scoped>
* {
  user-select: none;
}
.box {
  padding: 20px;
  min-height: calc(90vh - 70px);
  background-color: white;
  display: flex;
  justify-content: flex-start;
  flex-flow: column;
}
.ll {
  display: flex;
  flex-flow: column;
  height: 100px;
  justify-content: space-around;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}
.r-btom {
  height: 100%;
  display: flex;
  flex-flow: column;
  margin-top: 20px;
  padding: 20px;
  background-color: white;
}
.font-20 {
  font-size: 20px;
}
.font-16 {
  font-size: 16px;
  color: #666666;
  padding: 20px 0;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
